<template>
	<view>
		<uni-popup ref="orgPickRef" @maskClick="closePopup()">
			<view class="popup-bd">
				<view class="popup-title mt20">
					{{ title }}
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<view class="popup-content">
					<!-- <uni-easyinput class="uni-mt-5" trim="all" v-model="search" placeholder="请输入内容" ></uni-easyinput> -->
					<view class="df ac jsb">
						<checkbox
							shape="square"
							:disabled="!multiple"
							@tap="handleCheckAllChange"
							color="#3971f8"
							:checked="checkAll"
						>
							全选
							<text style="margin: 0 10px; color: #8c8c8c"
								>已选 [ {{ select.length }} ]</text
							>
							<text
								v-show="select.length > 0 && multiple"
								style="color: #3971f8"
								@click.stop="clearSelected"
							>
								清空</text
							>
						</checkbox>
						<template v-if="deptStack.length > 0">
							<div
								@click="beforeNode"
								class="to-top"
								style="color: #3971f8"
							>
								上一级
							</div>
						</template>
					</view>
					<view v-for="org in nodes" :key="org.id" class="mt20">
						<view class="df ac jsb">
							<view class="df ac" @tap="selectChange(org)">
								<radio
									:checked="org.selected"
									:disabled="disableDept(org)"
									color="#3971f8"
								/>
								<avatar
									:name="org.name"
									v-if="org.type === 'user'"
								></avatar>
								<view v-else>{{ org.name }}</view>
							</view>
							<view
								style="color: #3971f8"
								@tap.stop="nextNode(org)"
								v-if="org.type === 'dept'"
								>下级</view
							>
						</view>
					</view>
				</view>
				<view class="popup-bottom df ac"
					><button class="primary-button w90" @tap="submitChoose()">
						确定
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { getOrgTree } from '@/subPackagesIndex/pages/index/approval/launch/apis/design.js'
import avatar from '../avatar.vue'
export default {
	components: { avatar },
	props: {
		show: {
			type: Boolean,
			value: false,
			default: false,
		},
		title: {
			type: String,
			value: '',
			default: '',
		},
		type: {
			type: String,
			default: '',
		},
		multiple: {
			type: Boolean,
			default: false,
		},
		selected: {
			default: () => {
				return []
			},
			type: Array,
		},
	},
	data() {
		return {
			checkAll: false,
			//选中的项
			select: [],
			deptStack: [],
			nodes: [],
			nowDeptId: [],
		}
	},
	methods: {
		init() {
			this.checkAll = false
			this.nowDeptId = null
			this.nodes = []
			this.deptStack = []
			this.select = Object.assign([], this.selected)
			this.selectToLeft()
		},
		selectToLeft() {
			let nodes = this.nodes
			// let nodes = this.search.trim() === '' ? this.nodes : this.searchUsers
			nodes.forEach((node) => {
				for (let i = 0; i < this.select.length; i++) {
					if (this.select[i].id === node.id) {
						node.selected = true
						break
					} else {
						node.selected = false
					}
				}
			})
		},
		//全选
		handleCheckAllChange() {
			this.checkAll = !this.checkAll
			this.nodes.forEach((node) => {
				if (this.checkAll) {
					if (!node.selected && !this.disableDept(node)) {
						node.selected = true
						this.select.push(node)
					}
				} else {
					node.selected = false
					for (let i = 0; i < this.select.length; i++) {
						if (this.select[i].id === node.id) {
							this.select.splice(i, 1)
							break
						}
					}
				}
			})
		},
		disableDept(node) {
			return this.type === 'user' && node.type === 'dept'
		},
		//选择
		selectChange(node) {
			if (node.selected) {
				this.checkAll = false
				for (let i = 0; i < this.select.length; i++) {
					if (this.select[i].id === node.id) {
						this.select.splice(i, 1)
						break
					}
				}
				node.selected = false
			} else if (!this.disableDept(node)) {
				node.selected = true
				// let nodes = this.search.trim() === '' ? this.nodes : this.searchUsers
				let nodes = this.nodes
				if (!this.multiple) {
					nodes.forEach((nd) => {
						if (node.id !== nd.id) {
							nd.selected = false
						}
					})
				}
				if (node.type === 'dept') {
					if (!this.multiple) {
						this.select = [node]
					} else {
						this.select.unshift(node)
					}
				} else {
					if (!this.multiple) {
						this.select = [node]
					} else {
						this.select.push(node)
					}
				}
			}
		},
		//清空按钮
		clearSelected() {
			let _that = this
			uni.showModal({
				title: '提示',
				content: '您确定要清空已选项吗？',
				showCancel: true,
				confirmColor: '#5374F7',
				success(res) {
					if (res.confirm) {
						_that.checkAll = false
						_that.recover()
					}
				},
			})
		},
		// 清空数据
		recover() {
			this.select = []
			this.nodes.forEach((nd) => (nd.selected = false))
		},
		//下一级
		nextNode(node) {
			if (!node.selected) {
				this.nowDeptId = node.id
				this.deptStack.push(node)
				this.getOrgList()
			}
		},
		//上一级
		beforeNode() {
			if (this.deptStack.length === 0) {
				return
			}
			if (this.deptStack.length < 2) {
				this.nowDeptId = null
			} else {
				this.nowDeptId = this.deptStack[this.deptStack.length - 2].id
			}
			this.deptStack.splice(this.deptStack.length - 1, 1)
			this.getOrgList()
		},
		getOrgList() {
			getOrgTree({
				type: this.type,
				deptId: this.nowDeptId,
			}).then((res) => {
				this.nodes = res
				this.selectToLeft()
			})
		},
		closePopup() {
			this.$refs.orgPickRef.close()
			this.$emit('close')
			this.recover()
		},
		openPopup() {
			this.$refs.orgPickRef.open('bottom')
			this.init()
			this.getOrgList()
		},
		submitChoose() {
			if (this.select && this.select.length === 0) {
				uni.showToast({
					title: '没有选择~',
					icon: 'none',
				})
				return
			}
			this.$emit('submit', this.select)
			this.closePopup()
		},
	},
	watch: {
		show(val) {
			if (val) {
				this.openPopup()
			} else {
				this.closePopup()
			}
		},
	},
}
</script>
<style scoped lang="scss">
.active-checked-box {
	color: #fff;
	background: #2b58de;
	border: 1rpx solid #2b58de !important;
}
.checked-box {
	width: 40rpx;
	height: 40rpx;
	border: 1rpx solid #ccc;
	border-radius: 60rpx;
	margin-right: 10rpx;
}
.popup-content {
	overflow-y: auto;
}
</style>
